// 修改 添加 用户
import { Button, Drawer, Form, Input, Message, Select } from '@alifd/next';
import userService from '@/services/user';
import styles from './index.module.css';

export interface DrawerUserProps {
  // 类型 0添加 1修改
  type: 0 | 1;
  // 显示隐藏
  isShow: boolean;
  // 关闭
  onClose: () => void;
  // 数据
  record?: {
    status: { id: number };
    id: number;
    name: string;
    email: string;
  };
  // 更新
  onUpdate: () => void;
}

const DrawerUser: React.FC<DrawerUserProps> = ({
                                                 type,
                                                 isShow,
                                                 onClose,
                                                 record,
                                                 onUpdate,
                                               }) => {

  // 添加用户
  const addUser = (values: any, errors: any) => {
    if (!errors) {
      userService.addUser(values.name, values.email, values.password, values.status).then((result) => {
        if (result.data && result.success) {
          Message.success(`${values.name}添加成功 (●'◡'●)`);
          onUpdate();
          onClose();
        }
      });
    }
  };
  // 管理员修改用户
  const updateUser = (values: any, errors: any) => {
    if (!errors) {
      if (record) {
        userService.updateUser(record.id, values.name, values.status).then((result) => {
          if (result.success) {
            Message.success(`${values.name}修改成功 (●'◡'●)`);
            onUpdate();
            onClose();
          }
        });
      }
    }
  };

  return (
    <Drawer
      v2
      title={type ? '修改用户' : '添加用户'}
      placement="right"
      visible={isShow}
      onClose={onClose}
    >
      <Form>
        <div className="mb-50px">
          <Form.Item
            name="status"
            label="身份"
            required
          >
            <Select
              className="w-full"
              defaultValue={record?.status.id ?? 1}
            >
              <Select.Option value={0}>管理员</Select.Option>
              <Select.Option value={1}>用户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="name"
            label="昵称"
            required
            asterisk={false}
            maxLength={20}
          >
            <Input placeholder="请输入昵称" defaultValue={record?.name} />
          </Form.Item>
          <Form.Item name="email" label="邮箱" format="email" required asterisk={false}>
            <Input placeholder="请输入邮箱" disabled={type == 1} defaultValue={record?.email} />
          </Form.Item>
          {type == 0 &&
            <Form.Item name="password" label="密码" required asterisk={false} minLength={6}>
              <Input.Password placeholder="请输入密码" />
            </Form.Item>}
        </div>
        <footer className={styles.footer}>
          <Form.Submit
            validate
            type="primary"
            onClick={(value, errors) => (type ? updateUser(value, errors) : addUser(value, errors))}
          >确定</Form.Submit>
          <Button onClick={onClose}>取消</Button>
        </footer>
      </Form>
    </Drawer>
  );
};
export default DrawerUser;
